<template>
    <div class="sign_form_content" :style="{height: signItems.length > 0 ? `${a4Size.height}px` : 'auto'}">
        <el-form ref="form" :model="signForm" label-width="80px">
            <div class="header_area">
                <div class="form_item project_item">
                    <span>{{contract.pro_name}}</span>
                </div>
                <div class="form_item">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="承包单位">
                                <el-input v-model="contract.bid_org_name" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="合同号">
                                <el-input v-model="contract.code" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="监理单位">
                                <el-input v-model="contract.sup_org_name" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="编号">
                                <el-input v-model="contract.no" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div class="form_item title_item" v-if="$utils.isNotEmpty(settingData.name)">
                    <span>{{settingData.name}}</span>
                </div>
            </div>
            <div class="form_item sign_item" v-show="signItems.length > 0"
                 :style="{height: `calc(100% - ${headerHeight}px)`}">
                <SignItemForm :edit="edit" :work="work" ref="signItemForm" :items="signItems"/>
            </div>
        </el-form>

        <el-dialog class="select_contract_dialog" title="提示" :visible.sync="selectOptions.visible"
                   width="400px" :append-to-body="true">
            <div class="dialog_content">
                <p>请选择标段</p>
                <el-select v-model="selectOptions.contract_sid" style="width: 100%;">
                    <el-option v-for="(item, index) in selectOptions.contractList"
                               :key="index"
                               :label="item.name"
                               :value="item.sid">
                    </el-option>
                </el-select>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleClickSelectBtn('confirm')">确定</el-button>
                <el-button @click="handleClickSelectBtn('close')">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import SignItemForm from "./SignItemForm";
    import mxNoPartSettingApi from "@/api/nopart/mxNoPartSettingApi";
    import mxProContractApi from "@/api/project/mxProContractApi";
    import mxRoutineWorkApi from "@/api/routine_work/mxRoutineWorkApi";

    export default {
        name: "SignForm",
        components: {SignItemForm},
        props: {
            data: {
                type: Object,
                default () {
                    return {};
                },
            },
            edit: {
                type: Boolean,
                default: false,
            },
        },
        data () {
            return {
                contract: {},
                settingData: {},
                signForm: {},
                signItems: [],
                headerHeight: 0,
                workData: {},
                snValueCodeObj: {
                    hdwl: 'HDWL_',
                    bzhjs: 'BZHJS_',
                    sbsp: 'SBSP_',
                },
                work: false,
                a4Size: {},
                paramsData: {},
                selectOptions: {
                    visible: false,
                    contract_sid: '',
                    contractList: [],
                },
            };
        },
        watch: {
            data () {
                this.initData();
            },
        },
        created () {
            this.a4Size = this.$utils.getA4Size();
        },
        mounted () {
            this.initData();
        },
        beforeDestroy () {
            this.paramsData = {};
        },
        methods: {
            initData () {
                let $this = this;
                $this.signItems = [];
                $this.work = false;
                $this.paramsData = $.extend({}, $this.data);
                if ($this.$utils.isNotEmpty($this.paramsData.data_sid)) {
                    $this.work = true;
                    $this.initRoutineWorkData($this.paramsData.data_sid);
                } else if ($this.$utils.isNotEmpty($this.paramsData.group_sid)) {
                    $this.initContractByGroupSid($this.paramsData.group_sid, $this.paramsData.type);
                } else if ($this.$utils.isNotEmpty($this.paramsData.contract_sid)) {
                    $this.initContract($this.paramsData.contract_sid, $this.paramsData.type);
                } else {
                    $this.contract = $.extend({}, $this.paramsData, {
                        tableName: $this.paramsData.name,
                    });
                    $this.signItems = [].concat($this.paramsData.cfgItems);
                }
            },
            getHeaderAreaHeight () {
                return $('.sign_form_content').find('.header_area').outerHeight();
            },
            async initContract (sid, type) {
                let $this = this;
                if ($this.$utils.isNotEmpty(sid)) {
                    mxProContractApi.getMxProContractBySid({sid, type: this.snValueCodeObj[type]}, result => {
                        $this.contract = $.extend({}, $this.contract, (result.data || {}));
                        $this.$nextTick(() => {
                            $this.headerHeight = $this.getHeaderAreaHeight();
                            $this.initCfgItems($this.paramsData.setting_sid);
                        });
                    });
                }
            },
            async initContractByGroupSid (group_sid, type) {
                let $this = this;
                if ($this.paramsData.changeDocType) {
                    $this.initCfgItems($this.paramsData.setting_sid);
                    $this.$nextTick(() => {
                        $this.headerHeight = $this.getHeaderAreaHeight();
                    });
                } else {
                    $this.contract = {};
                    $this.contractList = [];
                    if ($this.$utils.isNotEmpty(group_sid)) {
                        mxProContractApi.getMxProContractByGroupSid({
                            group_sid,
                            type: this.snValueCodeObj[type]
                        }, result => {
                            let resData = result.data || [];
                            $this.signItems = [];
                            $this.initCfgItems($this.paramsData.setting_sid);
                            if (resData.length > 0) {
                                if (resData.length === 1) {
                                    let snValue = resData[0].snValueExt;
                                    $this.contract = $.extend({}, $this.contract, resData[0], {
                                        no: resData[0].code + '' + (snValue.valueStr || ''),
                                    });
                                } else {
                                    $this.selectOptions = {
                                        visible: true,
                                        contract_sid: resData[0].sid,
                                        contractList: resData,
                                    };
                                }
                            }
                            $this.$nextTick(() => {
                                $this.headerHeight = $this.getHeaderAreaHeight();
                            });
                        });
                    }
                }
            },
            handleClickSelectBtn(type) {
                let $this = this;
                if (type === 'confirm') {
                    let filter = $this.selectOptions.contractList.filter(item => item.sid === $this.selectOptions.contract_sid);
                    if (filter.length > 0) {
                        let snValue = filter[0].snValueExt;
                        $this.contract = $.extend({}, $this.contract, filter[0], {
                            no: filter[0].code + '' + snValue.valueStr,
                        });
                        $this.selectOptions = {
                            visible: false,
                        };
                        $this.$nextTick(() => {
                            $this.headerHeight = $this.getHeaderAreaHeight();
                        });
                    } else {
                        $this.selectOptions = {
                            visible: $this,
                        };
                        $this.$emit('close');
                    }
                } else if (type === 'close') {
                    $this.selectOptions = {
                        visible: false,
                    };
                    $this.$emit('close');
                }
            },
            async initCfgItems (sid) {
                let $this = this;
                if ($this.$utils.isNotEmpty(sid)) {
                    mxNoPartSettingApi.getMxNoPartSettingBySid({sid}, result => {
                        $this.settingData = result.data || {};
                        $this.signItems = $this.resetCfgItems($this.settingData.cfgItems);
                        $this.$nextTick(() => {
                            $this.contract = $.extend({}, $this.contract, {
                                no: $this.settingData.code + '' + ($this.contract.contract_no || ''),
                            });
                            $this.headerHeight = $this.getHeaderAreaHeight();
                        });
                    });
                }
            },
            resetCfgItems(datas) {
                let list = [];
                if (datas && datas.length > 0) {
                    datas.forEach(item => {
                        let obj = $.extend({}, item);
                        if (item.items && item.items.length > 0) {
                            let items = [$.extend({}, item, {items: []})];
                            obj.items = items.concat(item.items);
                        } else {
                            obj.items = [];
                        }
                        list.push(obj);
                    });
                }
                return list;
            },
            async initRoutineWorkData (sid) {
                let $this = this;
                if ($this.$utils.isNotEmpty(sid)) {
                    await mxRoutineWorkApi.getMxRoutineWorkBySid({sid}, result => {
                        $this.workData = result.data || {};
                        $this.settingData = $.extend({}, $this.settingData, {
                            name: $this.workData.docTypeName,
                        })
                        $this.initContract($this.workData.contract_sid, $this.workData.routine_type, true).then(() => {
                            $this.$nextTick(() => {
                                $this.headerHeight = $this.getHeaderAreaHeight();
                                $this.signItems = $this.resetCfgItems($this.workData.signItemList);
                            });
                        });
                    });
                }
            },
            getData () {
                let signForm = $.extend({}, this.settingData);
                if (this.$refs['signItemForm']) {
                    signForm.signItemList = this.$refs['signItemForm'].getSignItemData();
                }
                signForm.contract = this.contract;
                return signForm;
            },
        },
    }
</script>

<style lang="less" rel="stylesheet.less" scoped>
    .sign_form_content {
        height: 100%;
        font-size: 16px;

        .el-form {
            height: 100%;

            .form_item {
                width: 100%;
            }

            .project_item {
                text-align: center;
                font-size: 22px;
                font-weight: bold;
                padding-bottom: 10px;
            }

            .title_item {
                text-align: center;
                padding: 5px 0 10px;
                font-size: 18px;
            }

            .sign_item {
                height: calc(100% - 175px);
            }
        }

        /deep/ .el-form-item {
            margin-bottom: 5px;
        }
    }

    .select_contract_dialog {
        display: flex;
        justify-content: center;
        align-items: Center;
        overflow: hidden;

        /deep/ .el-dialog {
            margin: 0 auto !important;
            overflow: hidden;

            .el-dialog__body {
                height: 150px;
                padding: 15px;
                z-index: 1;
                overflow: hidden;
                overflow-y: auto;

                .dialog_content {
                    p {
                        margin-bottom: 10px;
                    }
                }
            }

            .el-dialog__footer {
                position: absolute;
                left: 0;
                bottom: 0;
                padding: 0 15px 15px;
                width: 100%;
            }
        }
    }
</style>
